<template>
  <div @keyup.enter="getData()">
    <el-form class="query-table-form" :inline="true">
      <el-form-item>
        <el-input v-model="params.batch_no" placeholder="批次号查询" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.bank_name" placeholder="银行名称查询" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          v-model="params['item_status.eq']"
          @change="getData()"
          clearable
          :options="enumItemStatus"
          placeholder="项目状态"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:name="scope">
        <el-popover placement="top-start" title="项目经理" trigger="hover">
          <div>
            <div>{{ `A角： ${scope.row.res_a_name || '-'}；` }}</div>
            <div>{{ `B角： ${scope.row.res_b_name || '-'}；` }}</div>
          </div>
          <div slot="reference">
            <div class="status-label badge-info text-left w-100">
              <div>A角:{{ scope.row.res_a_name }}</div>
              <div>B角:{{ scope.row.res_b_name }}</div>
            </div>
          </div>
        </el-popover>
      </template>
      <template v-slot:status="scope">
        <span class="badge" :class="`badge-${scope.row.statusStyle}`">
          {{ scope.row.statusLabel }}
        </span>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
    <item-edit-dialog
      :visible.sync="editVisible"
      @success="handleSuccess"
      :form-data="formData"
    ></item-edit-dialog>

    <recommend-list
      :visible.sync="viewVisible"
      :attach-data="attachData"
      :query-id="queryId"
      view-mode
    ></recommend-list>
  </div>
</template>

<script>
import baseMixins from '@/credit/views/city/bus/simple/mixins'
import ItemEditDialog from '@/credit/views/county/unionFast/item/ItemEditDialog'
import RecommendList from '@/credit/views/city/bus/simple/RecommendList'
import { enumItemStatus, enumApproveStyle } from '@/credit/views/city/bus/simple/index'
export default {
  components: {
    ItemEditDialog,
    RecommendList,
  },
  mixins: [baseMixins],
  props: {},
  data() {
    return {
      enumItemStatus,
      params: {
        index: 1,
        size: 15,
        batch_no: '',
        bank_name: '',
        'claim_status.eq': 1,
      },
      order: {
        claim_time: 'desc',
      },

      loading: false,
      exportLoading: false,
      tableData: [],
      totalCount: 0,
      tableColumns: [
        { attrs: { label: '批次号', prop: 'batch_no', align: 'center' } },
        { attrs: { label: '项目数量', prop: 'project_amount', align: 'center' } },
        { attrs: { label: '汇总总额(万元)', prop: 'project_funds', align: 'center' } },
        { attrs: { label: '推荐银行', prop: 'bank_name', align: 'center' } },
        {
          attrs: { label: '受理日期', prop: 'claim_time', width: 100 },
          process: v => (v || '').substring(0, 16),
        },
        { attrs: { label: '项目经理', prop: 'resName', width: 100 }, slot: 'name' },
        { attrs: { label: '项目状态', prop: 'statusLabel', align: 'center' }, slot: 'status' },
        {
          attrs: { label: '操作', align: 'center', width: 120 },
          operations: [
            {
              content: '立项',
              icon: 'fa fa-gavel',
              event: this.handleEdit,
              ifRender: row => row.editAble,
            },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],
      editVisible: false,
      formData: {},
      queryId: '',
      viewVisible: false,
      attachData: '',
    }
  },
  watch: {},
  created() {
    this.params = {
      ...this.userParams,
      ...this.params,
    }
    this.getData()
  },
  mounted() {},
  methods: {
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData({
          table: 'customer_related_quick_batch',
          params: this.params,
          order: this.order,
        })
        .then(res => {
          const data = res.data || {}
          this.totalCount = data.totalCount || 0
          this.tableData = (data.data || []).map(this.dataAdapter)
        })
        .finally(() => {
          this.loading = false
        })
    },

    dataAdapter(item) {
      item.resName = `A角: ${item.res_a_name} B角: ${item.res_b_name}`
      item.editAble = [item.res_a, item.res_b].includes(this.userId) && +item.item_status === 0
      item.statusLabel = enumItemStatus[item.item_status]
      item.statusStyle = enumApproveStyle[item.item_status]
      // item.editAble = true
      return item
    },

    handleEdit(row = {}) {
      this.formData = { ...row }
      this.editVisible = true
    },

    handleView(row = {}) {
      this.queryId = row.customer_related_quick_batch_id
      this.attachData = row.attachment || ''
      this.viewVisible = true
    },
    handleSuccess() {
      this.getData()
      this.$store.dispatch('getTaskResCountFast')
    },
  },
}
</script>

<style lang="scss" scoped>
.status-label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
</style>
